<template>
  <el-row>
    <el-col :span="24">
      <div  class="mediatitle">
        视频介质
        <span v-if="videoList.length > 0">({{videoList.length}})</span>
      </div>
    </el-col>
    <el-col :span="24" v-if="videoList && videoList.length > 0">
      <ul class="mediainfo" v-for="(video, index) in videoList" :key="video.videoid">
        <li style="width: 100%">
          <span>视频名称：</span>
          <span>{{video.name}}</span>
        </li>
        <li style="width: 100%;align-items:center;">
          <span>播放地址：</span>
          <span v-if="video.playurl" class="align-items" style="display:flex;">
            <span  class="txtclamp" style="display:block;width:50%;">{{video.playurl}}</span>
            <copy-button :copy-content="video.playurl"/>
          </span>
          <span v-else>暂无</span>
        </li>
        <li style="width: 100%;align-items:center;">
          <span>直播推流地址：</span>
          <span v-if="video.pushurl" class="align-items" style="display:flex;">
            <span  class="txtclamp" style="display:block;width:50%;">{{video.pushurl}}</span>
            <copy-button :copy-content="video.pushurl"/>
          </span>
          <span v-else>暂无</span>
        </li>
        <li>
          <span>回看播放地址：</span>
          <span v-if="video.reviewurl">
            {{video.reviewurl}}
            <copy-button :copy-content="video.reviewurl"/>
          </span>
          <span v-else>暂无</span>
        </li>
        <li style="width: 100%;align-items:start;">
          <span>遮罩图：</span>
          <span>
            <ul class="imglist">
              <li v-if="video.maskimg && video.maskimg.viewurl">
                <el-image
                        :src="video.maskimg.viewurl"
                        :preview-src-list="imgSrcList"
                        :initial-index="index"
                        fit="scale-down"
                        style="width:160px;height:160px"
                />
                <a class="delete-image" href="javascript:;" v-if="isedit" @click.stop="handleDeleteImage(video)">
                  <el-icon><circle-close/></el-icon>
                </a>
                <a class="edit-image" href="javascript:;" v-if="isedit" @click.stop="handleAddVideoMask(video)">重新选择</a>
              </li>
              <li v-else-if="isedt" class="imgplus" @click="handleAddVideoMask(video)">
                <div>
                  <el-icon>
                    <plus />
                  </el-icon>
                </div>
              </li>
            </ul>
          </span>
        </li>
         <el-divider border-style="dashed" v-if="index != (videoList.length - 1)"></el-divider>
      </ul>
    </el-col>
    <el-col :span="24" v-else>
      <el-empty :image-size="50" />
    </el-col>
  </el-row>
  <rel-image-medium
    ref="relImageMediumRef"
    :dialog-rel-image-form-data="dialogFormData"
    dialog-select-type="radio"
    :dialog-rel-image-visible="dialogVisible"
    :dialog-rel-image-title="dialogTitle"
    dialog-rel-action="createSeries"
    dialog-rel-image-media-type="series"
    @handleCancelRelImageDialog="handleCloseDialog"
    @handleVideoPlay="handleVideoPlay"
    @reloadMediaData="handleCallBack"
  />
</template>

<script>
  import {ref, toRef, reactive, nextTick} from 'vue'
  import {isHttp} from "@/utils/validate";
  import CopyButton from "@/components/Copy/CopyButton";
  import { seriesRefVideos } from "@/api/media/media";
  import RelImageMedium from "../../Medium/RelImageMedium";
  import { editSeriesRefVideoSort } from "@/api/media/media";
  import { ElMessageBox, ElMessage } from 'element-plus'

  export default {
    name: "LiveVideoMedium",
    components: {CopyButton, RelImageMedium},
    props: {
      seriesinfo: {
        type: Object
      },
      isedit: {
        type: Boolean,
        default: false
      }
    },
    emits: ['handleVideoPlay'],
    setup(props, { emit }) {
      const videoList = ref([])
      const seriesData = toRef(props, 'seriesinfo')
      const dialogVisible = ref(false)
      const dialogFormData = reactive({
        relid: undefined,
        video: {
          maskimgid: 0,
        },
        sort: 1,
        viewurl:''
      })
      const dialogTitle = ref('')
      const imgSrcList = ref([])
      const relImageMediumRef = ref(null)

      const getSeriesRelVideos = () => {
        seriesRefVideos({seriesid: seriesData.value.seriesid}).then(response => {
          if (response.errcode == 0) {
            videoList.value = response.data
            imgSrcList.value = []
            videoList.value.forEach(row => {
              if (row.maskimg && row.maskimg.viewurl) {
                imgSrcList.value.push(row.maskimg.viewurl)
              } else {
                imgSrcList.value.push('')
              }
            })
          }
        })
      }
      const handleAddVideoMask = (row) => {
        dialogFormData.relid = row.relid
        dialogFormData.sort = row.relsort
        dialogFormData.video.maskimgid = (row.maskimg && row.maskimg.imgid) ? row.maskimg.imgid : 0
        dialogTitle.value = '编辑视频 ' + row.name
        dialogFormData.viewurl = (row.maskimg && row.maskimg.viewurl) ? row.maskimg.viewurl : ''
        dialogVisible.value  = true
        nextTick(() => {
          relImageMediumRef.value.init()
        })
      }
      const handleCloseDialog = () => {
        dialogVisible.value = false
      }

      const handleVideoPlay = (row) => {
        emit('handleVideoPlay', row)
      }

      const handleCallBack = (data) => {
        if (data.length > 0) {
          dialogFormData.video.maskimgid = data[0].data.imgid
          editSeriesRefVideoSort(dialogFormData).then(response => {
            if (response.errcode == 0) {
              getSeriesRelVideos()
            }
          })
        }
      }

      const handleDeleteImage = (video) => {
        ElMessageBox.confirm('确定要删除该遮罩图吗？', '删除遮罩图', {
          type: 'warning',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          dialogFormData.relid = video.relid
          dialogFormData.video.maskimgid = 0
          dialogFormData.sort = video.relsort
          dialogFormData.video.maskimgid = 0
          editSeriesRefVideoSort(dialogFormData).then(response => {
            if (response.errcode == 0) {
              ElMessage({
                type: 'success',
                message: response.msg,
                duration: 2000,
                onClose: () => {
                  getSeriesRelVideos()
                }
              })
            }
          })
        }).catch(() => {})
      }

      const init = () => {
        getSeriesRelVideos()
      }
      return {
        init,
        videoList,
        isHttp,
        dialogVisible,
        dialogFormData,
        handleCloseDialog,
        handleVideoPlay,
        handleAddVideoMask,
        dialogTitle,
        imgSrcList,
        handleCallBack,
        relImageMediumRef,
        handleDeleteImage
      }
    }
  }
</script>

<style scoped lang="scss">
  .imglist{
    display: flex;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 160px !important;
      margin-right: 15px;
      margin-bottom:10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border:1px solid rgba(153,153,153,0.4);
      .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
      };
      .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
          font-size:20px;
        }
      }
    }
    li.imgplus{
      >div{text-align: center;}
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items: center;
      width: 160px;
      height: 160px;
      overflow: hidden;
      border: 1px dashed rgba(153,153,153,0.4);
      background: rgba(222,222,222,0.4); cursor: pointer;
      .el-icon{font-size: 50px;color:#999;}
    }
    li:nth-child(6n){margin-right:0;}
  }
</style>
